---
title: Spinning Text
date: 2025-02-09
description: The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
author: aayushbharti
published: true
---

<ComponentPreview name="spinning-text-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/spinning-text
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="spinning-text" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Reverse

<ComponentPreview name="spinning-text-demo-2" />

### Usage

```tsx showLineNumbers
import { SpinningText } from "@/components/ui/spinning-text"
```

```tsx showLineNumbers
<SpinningText>learn more • earn more • grow more •</SpinningText>
```

## Props

| Prop         | Type                                         | Default | Description                                             |
| ------------ | -------------------------------------------- | ------- | ------------------------------------------------------- |
| `children`   | `ReactElement`                               |         | The text content to be animated in a circular motion.   |
| `style`      | `CSSProperties`                              | `{}`    | Custom styles for the text container.                   |
| `duration`   | `number`                                     | `10`    | The duration of the full circular rotation animation.   |
| `className`  | `string`                                     |         | A custom class name for the text container.             |
| `reverse`    | `boolean`                                    | `false` | Determines if the animation should rotate in reverse.   |
| `radius`     | `number`                                     | `5`     | The radius of the circular path for the text animation. |
| `transition` | `Transition`                                 |         | Custom transition effects for the animation.            |
| `variants`   | `{ container?: Variants; item?: Variants; }` |         | Variants for container and item animations.             |

## Credits

- Credit to [@AayushBharti](https://github.com/AayushBharti)
